<template>
  <div class="container">
    <!-- 吸顶 -->
    <van-sticky>
      <!-- 顶部导航栏 -->
      <van-nav-bar title="服务" left-arrow @click-left="$router.go(-1)">
        <template #left>
          <van-icon color="black" name="arrow-left" size="18" />
        </template>
        <template #right>
          <van-icon color="black" name="share-o" size="18" />
        </template>
      </van-nav-bar>
    </van-sticky>
    <!-- 标签页 -->
    <div style="margin-bottom: 80px;">
      <van-tabs scrollspy sticky offset-top="46" line-width="10px" v-model="active" style="font-weight: bold;">
        
        <van-tab title="商品" title-style="font-weight: bold" style="border-buttom: solid 5px #39a9ed;">

          <!-- 轮播广告 -->
          <van-swipe :autoplay="3000" lazy-render height="300" @change="onChange123">
            <van-swipe-item v-for="(img, i) in images" :key="i">
              <van-image class="banner-img" @click="getImg(i)" :src='require(`@/assets/${img}`)' />
            </van-swipe-item>
          </van-swipe>

          <!-- 商品卡片 -->
          <div class="card">
            <div class="card-top">
              ¥<span> {{ shopList.price }}</span>起
            </div>
            <b>{{ shopList.name }}</b>
            <div class="card-text">{{ shopList.eazy }}</div>
            <div class="card-button">
              <span><van-icon name="passed" /> 随时预约</span>
              <span><van-icon name="passed" /> 专业清洗工具</span>
              <span><van-icon name="passed" /> 阿姨专业培训</span>
            </div>
          </div>


        </van-tab>
        <van-tab title="评价" title-style="font-weight: bold">
          <!-- 标题 -->
          <div class="appraise-top">
            <div>评价 4.1万+</div>
            <div @click="goAppraise">
              <span style="color: #f82325; font-size: 14px;">好评率99.1% </span>
              <van-icon name="arrow" />
            </div>
          </div>
          <!-- 内容 -->
          <div class="appraise-item">
            <div @click="goAppraise" v-for="item in 5" class="appraise-list">
              <div class="appraise-list-1">
                <img src="@/assets/1.jpg" alt="">
                <div class="appraise-list-2">
                  <div class="appraise-list-2-name">
                    <span>用户名</span>
                    <!-- 评星 -->
                    <van-rate v-model="star" :size="15" color="#ffd21e" void-icon="star" void-color="#eee" />
                  </div>
                  <van-tag plain>服务态度好</van-tag>&nbsp;
                  <van-tag plain>有高温消毒</van-tag>
                </div>
              </div>
              <div class="appraise-list-txt">师傅干活儿超厉害...师傅干活儿超厉害...</div>
              <div class="appraise-list-img">
                <img v-for="item in 3" src="@/assets/2.jpg">
              </div>
            </div>
            <div class="appraise-more">
              <span @click="goAppraise">查看更多</span>
              <van-icon name="arrow" />
            </div>
          </div>

        </van-tab>
        <van-tab title="详情" title-style="font-weight: bold">
          <van-divider>详情</van-divider>
          <van-image :src="require(`@/assets/${shopList.detail}`)" />
        </van-tab>
        <van-tab title="推荐" title-style="font-weight: bold">
          <van-divider>商品推荐</van-divider>
          <div class="shop">
            <div class="shop-card" v-for="item in shopSuggest" :key="item.id" @click="goShop(item.id)">
              <div class="shop-rebate">
                <p>满99减30</p>
              </div>
              <!-- <img src="@/assets/serve/page_banner/4.jpg"> -->

              <img :src="require(`@/assets/${item.page_banner}`)">
              <div class="shop-item">
                <span>{{ item.name }}</span>
                <div>{{ item.eazy }}</div>
                <h5>¥ {{ item.price }} 起</h5>
              </div>
            </div>


          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 底部提交 -->
    <div class="foot">
      <!-- 收藏 -->
      <van-icon @click="icon = !icon" :name="icon ? 'star-o' : 'star'" :color="icon ? '' : '#e2c834'" size="30" />
      <!-- 按钮 -->
      <van-button is-link @click="goShopdingdan(shopList.id)" class="btn" type="info" text="添加订单"
        :color="`linear-gradient(to right, ${$store.state.primary_color_1}, ${$store.state.primary_color_2})`"></van-button>
    </div>
  </div>
</template>

<script>
import httpApi from '@/http'
import { ImagePreview } from 'vant';
export default {
  data() {
    return {
      shopList: [], // 存储商品详情数据
      images: [],// 存储顶部轮播图
      shopSuggest: [], // 存储商品推荐


      active: 1,// 标签页

      // 评分
      icon: true,
      star: 0
    }
  },
  methods: {
    // onConfirm(date) {
    //   this.time = false;
    //   this.date = this.formatDate(date);
    // },
    // 轮播图片预览
    getBigImg(i) {
      ImagePreview({
        images: this.images, // 预览图片的那个数组
        showIndex: true,
        loop: false,
        startPosition: i, // 指明预览第几张图
      })
      console.log(i);
    },
    // 轮播图
    onChange123(index) {
      // console.log('当前 Swipe 索引：' + index);
    },

    // 跳转评价页面
    goAppraise() {
      this.$router.push('/appraise')
    },
    // 跳转商品页面
    goShop(id){
      this.$router.push(`/serve-shop/${id}`)
      location.reload()
    },
    goShopdingdan(id){
      this.$router.push(`/confirm-order/${id}`)
      // console.log(shopList);
    }
  },
  mounted() {
    let sid = this.$route.params.id
    console.log('接收到的id:', sid);
    // 查询小类列表
    httpApi.serveApi.queryIdSmallClassList({ sid }).then(res => {
      this.shopList = res.data.data[0]
      console.log('服务数据', this.shopList);
      // 处理轮播图 this.images
      this.images = this.shopList.banner.split(',')
      // console.log('轮播图', this.images);
      // 查询商品推荐数据
      let id = this.shopList.sm_class
      // console.log('查询id', id);
      httpApi.serveApi.queryIdSmallShopList({ id }).then(res => {
        this.shopSuggest = res.data.data
        console.log('商品推荐', this.shopSuggest);
      })
    })

  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
}

.banner-img {
  object-fit: cover;
  height: 100%;
  width: 100vw;
}

.card {
  display: flex;
  flex-direction: column;
  padding-left: 15px;
  font-size: 14px;
  background: #fbfbfb;
  color: #b0b0b3;


  .card-top {
    margin-top: 10px;
    color: #f82325;
    font-weight: bold;
    font-size: 16px;

    span {
      font-size: 30px;
    }
  }

  b {
    font-weight: bolder;
    font-size: 18px;
    color: #3c3c3c;
  }

  .card-text {
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
  }

  .card-button {
    background: #fbfbfb;
    height: 30px;
    line-height: 30px;
    font-weight: 400;
    margin-top: 10px;

    span {
      padding-right: 10px;
      font-size: 12px;
    }
  }
}

.appraise-top {
  background-color: white;
  margin: 10px 0;
  padding: 15px 15px 15px 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ededed;
}

.appraise-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: scroll;
  background: #f9f9f9;


  .appraise-list {
    width: 220px;
    padding: 10px;
    margin: 10px 10px 10px 0;
    border-radius: 6px;
    border: #e3e3e3 1px solid;
    box-shadow: 0px 2px 2px 2px #b0b0b0;

    .appraise-list-1 {
      display: flex;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
      }

      .appraise-list-2 {
        margin-left: 15px;

        .appraise-list-2-name {
          span {
            margin-right: 10px;
          }
        }
      }
    }

    .appraise-list-txt {
      width: 220px;
      font-size: 14px;
      color: #3c3c3c;
      margin-top: 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .appraise-list-img {
      display: flex;
      align-items: center;
      height: 80px;

      img {
        margin-right: 10px;
        height: 65px;
        width: 65px;
        border-radius: 6px;
        object-fit: cover;
      }
    }
  }

  .appraise-more {
    border-radius: 8px;
    border: #e3e3e3 1px solid;
    box-shadow: 0px 2px 2px 2px #b0b0b0;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    width: 80px;
    height: 180px;
    margin-right: 5px;

    span {
      margin-left: 5px;
      width: 80px;
      text-align: center;
      line-height: 24px;
      font-size: 14px;
      color: #3c3c3c;
    }
  }
}

.appraise-item::-webkit-scrollbar {
  display: none;
}

.shop {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;

  .shop-card {
    background-color: white;
    box-shadow: 0px 2px 2px 2px #b0b0b0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 44vw;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 0 10px 7px;

    >.shop-rebate {
      background: #f82325;
      width: 90px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      position: absolute;
      border-radius: 8px 0 10px 0;
      color: #fff;
      opacity: .9;
    }

    >img {
      width: 100%;
      height: 132px;
      object-fit: cover;
    }

    >.shop-item {
      margin-top: 10px;
      padding: 0 10px;

      >div {
        color: #b0b0b3;
        margin: 5px 0;
        width: 40vw;
        font-size: 12px;
        font-weight: 300;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      >h5 {
        margin: 10px 0;
        color: #f82325;
        font-size: 16px;
      }
    }
  }

}

.foot {
  display: flex;
  align-items: center;
  padding: 20px 10px;
  position: absolute;
  width: 94%;
  border-top: #b0b0b3 solid 1px;
  background: white;
  position: fixed;
  bottom: 0;

  .btn {
    margin-left: 15px;
    flex: 1;
    border-radius: 10px;
  }
}</style>